<template>
  <div class="user">
    <el-divider content-position="left">个人信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="avatarImg">
          <el-avatar
            :size="120"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          >
          </el-avatar>
          <el-upload ref="upload" :file-list="fileList" action="">
            <el-button slot="trigger" size="small" type="primary"
              >头像上传</el-button
            >
            <div slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <div>
            <el-form
              label-width="80px"
              size="mini"
              :rules="rules"
              :model="formLabelAlign"
              ref="ValidateForm"
            >
              <el-form-item label="登录帐号">
                <el-input v-model="formLabelAlign.UserNo" disabled></el-input>
              </el-form-item>
              <el-form-item label="用户名" prop="userName">
                <el-input v-model="formLabelAlign.UserName"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="formLabelAlign.Tel"></el-input>
              </el-form-item>
              <el-form-item label="E-mail" prop="email">
                <el-input v-model="formLabelAlign.Email"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ValidateForm')"
                  >保存修改</el-button
                >
                <el-button @click="power()">设置委托</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>电子签字</span>
          </div>
          <div class="item">
            <el-image :src="src">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          <el-button type="primary" size="mini">设置/修改</el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>主部门</span>
          </div>
          <div class="item">
            <el-tag type="success">{{ formLabelAlign.DeptName }}</el-tag>
          </div>
          <el-button type="primary" size="mini">切换登录部门</el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>修改密码</span>
          </div>
          <div class="item"><el-tag type="success">*********</el-tag></div>
          <el-button type="primary" size="mini">修改密码</el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>岗位/部门-权限</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      fileList: [],
      formLabelAlign: {},
      src: "",
	  upUrl:"",
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "change" },
          {
            validator: function (rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  created() {
    this.loadData();
	//this.geturl()
  },
  methods: {
    loadData() {
      let handler = new this.HttpHandler("BP.WF.HttpHandler.WF_Setting");
      handler.AddUrlData();
      let data = handler.DoMethodReturnString("Default_Init");
      if (data.indexOf("err@") != -1) {
        this.$message.error(data);
        console.log(data);
        return;
      }
      this.formLabelAlign = JSON.parse(data);
      console.log(this.formLabelAlign);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let handler = new this.HttpHandler("BP.WF.HttpHandler.WF_Setting");
          handler.AddPara("Name", this.formLabelAlign.UserName);
          handler.AddPara("Tel", this.formLabelAlign.Tel);
          handler.AddPara("Email", this.formLabelAlign.Email);
          const data = handler.DoMethodReturnString("UpdateEmpNo");
          console.log(data);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    power() {
      this.$router.push({
		  name:'powerlist'
	  })
    },
	geturl(){
		var doMethod = "HeadPic_Save";
		const httpHandlerName = "BP.WF.HttpHandler.WF_Setting";
		this.url = dynamicHandler + "?DoType=HttpHandler&DoMethod=" + doMethod + "&HttpHandlerName=" + httpHandlerName;
	    console.log(this.url)
	}
  },
};
</script>

<style lang="less" scoped>
.user {
  .avatarImg {
    text-align: center;
    line-height: 40px;
    min-height: 292px;
  }
  .item {
    margin-bottom: 18px;
  }
}
</style>
